<template>
  <div class="upgoods">
    <div class="upgoods_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <div class="search_box">
            <el-input
              style="width:150px;height:28px;margin-right:10px"
              placeholder="请输入商品ID"
              suffix-icon="el-icon-search"
              v-model="searchipt"
              @keyup.enter.native="dosearch"
            >
            </el-input>
            <el-radio-group
              v-model="type"
              size="mini"
              @change="typeChange"
              style="margin-right:10px"
            >
              <el-radio-button label="1">进行中的商品</el-radio-button>
              <el-radio-button label="2">结束的商品</el-radio-button>
            </el-radio-group>
            <el-date-picker
              @change="timerChange"
              v-model="timerarr"
              type="daterange"
              size="mini"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              value-format="timestamp"
            >
            </el-date-picker>
          </div>
          <div class="taber_table">
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="全部商品" name="1"> -->
            <div class="promotiontable">
              <div>
                <el-table
                  v-loading="loading"
                  :data="tableData"
                  style="width: 100%"
                  :cell-style="rowClass"
                  :header-cell-style="headClass"
                  ref="singleTable"
                  @current-change="handleCurrentChange2"
                  highlight-current-row
                >
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="备注">
                          <span>{{ props.row.remarks }}</span>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column>
                  <!-- fixed -->
                  <el-table-column prop="date" label="发布时间">
                    <template slot-scope="scope">
                      <div>
                        {{
                          scope.row.start_time
                            | formatTime("yyyy-MM-dd hh:mm:ss")
                        }}
                        <!-- <div>{{ scope.row.tb_goods_id }}</div> -->
                      </div>
                      <!-- <div style="color:red">{{ scope.row.id }}</div> -->
                    </template>
                  </el-table-column>
                  <el-table-column prop="url" label="商品主图">
                    <template slot-scope="scope">
                      <a :href="scope.row.goods_url" target="_blank">
                        <el-image
                          style="width:100px;height:100px"
                          fit
                          :src="scope.row.goods_img"
                          lazy
                        >
                          <div slot="placeholder" class="image-slot">
                            <img
                              style="display:inline-block;width:100%;height:100%"
                              :src="require('@/assets/images/download.gif')"
                              alt=""
                              srcset=""
                            />
                          </div>
                        </el-image>
                      </a>
                    </template>
                  </el-table-column>
                  <el-table-column prop="title" label="商品信息">
                    <template slot-scope="scope">
                      <a :href="scope.row.goods_url" target="_blank">
                        <div style="text-align:center">
                          <!-- {{ scope.row.goods_short_title }} -->
                          {{ scope.row.goods_name }}
                        </div>
                      </a>
                      <div
                        style="display:flex;justify-content: space-around;align-items: center;"
                      >
                        <span
                          style="border-right:1px solid #c3c3c3;padding:0 7px 0 0"
                        >
                          ￥ {{ Math.round(scope.row.goods_price) }}
                        </span>
                        <span
                          style="border-right:1px solid #c3c3c3;color:red;padding:0 7px 0 0"
                        >
                          ￥ {{ parseInt(scope.row.after_coupon_price) }}
                        </span>
                        <span style="color:#FABC70;">
                          {{ scope.row.commission_than }}%
                        </span>
                        <!-- 商品销量 -->
                        <span> {{ scope.row.two_hour_num }} </span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="copywriting" label="文案">
                    <template slot-scope="scope">
                      <div
                        style="max-height:136px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;"
                      >
                        {{ scope.row.copywriting }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="coupon" label="优惠卷">
                    <template slot-scope="scope">
                      <div style="margin-top: 3px;">
                        <a
                          style="display:inline-block;margin-top:6px;color:black"
                          :href="scope.row.coupon_url"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          <span
                            style="background:red;border-top-left-radius: 5px; border-bottom-left-radius: 5px;padding: 5px 9px;color:white;text-align:center"
                            >劵</span
                          ><span
                            style="border:1px solid red;padding: 4px 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;"
                          >
                            ￥ {{ parseInt(scope.row.coupon_price) }}</span
                          >
                        </a>
                      </div>
                      <a
                        style="display:inline-block;margin-top:6px;color:blue"
                        :href="scope.row.coupon_url"
                        target="_blank"
                        rel="noopener noreferrer"
                        >领取</a
                      >
                      <div>
                        <span style="color:#FA624A">{{
                          scope.row.coupon_num - scope.row.coupon_surplus
                        }}</span
                        >/{{ scope.row.coupon_num }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="time" label="起止时间">
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.start_time | formatTime("yyyy-MM-dd hh:mm:ss")
                      }}</span
                      ><br />/
                      <br />
                      <span>{{
                        scope.row.goods_end_time
                          | formatTime("yyyy-MM-dd hh:mm:ss")
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.goods_status === 1">
                        <el-tag type="info">等待推广</el-tag>
                      </span>
                      <span v-else-if="scope.row.goods_status === 2">
                        <el-tag type="warning">佣金变动</el-tag>
                      </span>
                      <span v-else-if="scope.row.goods_status === 3">
                        <el-tag type="success">正在推广</el-tag>
                      </span>
                      <span v-else-if="scope.row.goods_status === 4">
                        <el-tag type="danger">推广结束</el-tag>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="action" label="操作">
                    <!-- <template slot="header" slot-scope="scope">
                      <el-input
                        v-model="searchipt"
                        size="mini"
                        placeholder="输入关键字搜索"
                      />
                    </template> -->
                    <template slot-scope="scope">
                      <!-- style="width: 30px;display: flex;flex-wrap: wrap;align-items: center;" -->
                      <div style="text-align:center">
                        <div>
                          <el-button
                            style="margin-left:0"
                            @click.native.prevent="editRow(scope)"
                            type="text"
                            size="small"
                          >
                            修改
                          </el-button>
                        </div>
                        <div>
                          <el-button
                            style="margin-left:0"
                            @click.native.prevent="godetails(scope.row)"
                            type="text"
                            size="small"
                          >
                            查看
                          </el-button>
                        </div>
                        <div>
                          <el-button
                            style="margin-left:0"
                            @click.native.prevent="
                              changeRow(scope.$index, scope, tableData)
                            "
                            type="text"
                            size="small"
                          >
                            换劵
                          </el-button>
                        </div>
                        <div>
                          <el-popconfirm
                            title="确定下架吗？"
                            @onConfirm="
                              deleteRow(scope.$index, scope, tableData)
                            "
                          >
                            <el-button
                              slot="reference"
                              style="margin-left:0"
                              type="text"
                              size="small"
                            >
                              下架
                            </el-button>
                          </el-popconfirm>
                        </div>
                        <div>
                          <el-button
                            style="margin-left:0"
                            @click.native.prevent="
                              addinfoRow(scope.$index, scope, tableData)
                            "
                            type="text"
                            size="small"
                          >
                            备注
                          </el-button>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div style="text-align: right;">
              <!-- 分页器 -->
              <!-- @size-change="handleSizeChange" -->
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                background
                :page-size="15"
                :pager-count="11"
                layout="total, prev, pager, next, jumper"
                :total="count"
              >
                <!-- :page-sizes="[100, 200, 300, 400]" -->
              </el-pagination>
            </div>
            <!-- </el-tab-pane> -->
          </div>
        </el-card>
        <!-- 修改弹窗 -->
        <el-dialog
          title="修改商品"
          :visible.sync="dialogFormVisible"
          :close-on-click-modal="false"
        >
          <el-card :body-style="{ padding: '10' }" style="text-align: left;">
            <div class="taber">
              <el-form :model="form" ref="form" label-width="100px">
                <el-divider content-position="left">
                  <span style="font-size:24px">商品信息</span>
                </el-divider>
                <el-form-item label="商品短标题：">
                  <el-input
                    type="text"
                    v-model="form.goods_name"
                    autocomplete="off"
                    placeholder="请填写商品名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="商品地址：">
                  <!-- <a :href="form.goods_url">{{ form.goods_url }}</a> -->
                  <el-input
                    type="text"
                    v-model="form.goods_url"
                    autocomplete="off"
                    placeholder="请填写商品名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="商品活动：">
                  <el-radio v-model="form.goods_activity" label="1"
                    >定向</el-radio
                  >
                  <el-radio v-model="form.goods_activity" label="2"
                    >淘抢购</el-radio
                  >
                  <el-radio v-model="form.goods_activity" label="3"
                    >聚划算</el-radio
                  >
                  <span style="color:red">活动优先审核!</span>
                </el-form-item>
                <el-form-item label="营销活动：">
                  <el-radio v-model="form.marketing_activities" label="0"
                    >无</el-radio
                  >
                  <el-radio
                    v-for="item in activity"
                    :key="item.activity_id"
                    v-model="form.marketing_activities"
                    :label="item.activity_id"
                    >{{ item.activity_name }}</el-radio
                  >
                </el-form-item>
                <el-form-item label="商品分类：">
                  <el-select
                    v-model="form.goods_class"
                    @change="classChange"
                    placeholder="请选择商品分类"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <a href="#">问题反馈</a>
                </el-form-item>
                <el-form-item label="店铺名称：">
                  <el-input
                    type="text"
                    v-model="form.shop_name"
                    autocomplete="off"
                    placeholder="请填写店铺名称"
                  ></el-input>
                  <div style="color:red">
                    严禁直接复制淘宝标题，查看<a>《短标题规范》</a>
                  </div>
                </el-form-item>
                <el-form-item label="店铺押金：">
                  <el-input
                    type="text"
                    v-model="form.shop_deposit"
                    autocomplete="off"
                    placeholder="请填写店铺押金金额"
                  ></el-input>
                </el-form-item>
                <!-- <el-form-item label="商品标题：">
                  <el-input
                    type="text"
                    v-model="form.goods_short_title"
                    autocomplete="off"
                    placeholder="例:品牌+品名+样式+规格等，清楚描述商品，10到20个字"
                  ></el-input>
                  <div style="color:red">
                    严禁直接复制淘宝标题，查看<a>《短标题规范》</a>
                  </div>
                </el-form-item> -->
                <el-form-item label="商品主图：">
                  <el-input
                    type="text"
                    v-model="form.goods_img"
                    autocomplete="off"
                    placeholder="请选择淘宝图片空间地址"
                  ></el-input>
                  <div class="chooseurl">
                    <div class="taber_box">
                      <div
                        style="width:120px;height:120px;border:1px solid #000"
                      >
                        <div class="demo-image__preview">
                          <el-image
                            style="width: 120px; height: 120px"
                            :src="form.goods_img"
                            :preview-src-list="srcList"
                          >
                            <div slot="error" class="image-slot">
                              <span style="font-size:12px">
                                选择右侧图片之后,点击查看大图
                              </span>
                            </div>
                          </el-image>
                        </div>
                      </div>
                      <el-radio-group
                        v-model="radio"
                        @change="changebar"
                        style="display: flex;justify-content: space-between;align-items: center;width: 0%;"
                      >
                        <el-radio-button
                          class="elradio"
                          v-for="item in mainUrl"
                          :key="item"
                          :label="item"
                        >
                          <img
                            style="width: 120px;height:120px;display: inline-block;"
                            :src="`http:` + item"
                            alt=""
                          />
                        </el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div style="color:red">
                    不符合要求将被扣除次数!<a>《主图规范》</a>
                  </div>
                </el-form-item>
                <el-form-item label="商品营销图：">
                  <el-upload
                    :show-file-list="true"
                    class="avatar-uploader"
                    action="http://gyapi.letuilm.com/upload"
                    :on-success="handleAvatarSuccess1"
                    :multiple="false"
                    :limit="1"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img
                      v-if="goods_yx_img !== ''"
                      :src="`http://` + goods_yx_img"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div style="color:red">
                    选填，请上传优质营销主图,营销主图的重要性，你懂得!查看<a
                      >《营销主图规范》</a
                    >
                    仅支持JPG. PNG格式图片,文件小于1M
                  </div>
                </el-form-item>
                <el-form-item label="相关商品图：">
                  <el-upload
                    :show-file-list="true"
                    class="avatar-uploader"
                    action="http://gyapi.letuilm.com/upload"
                    :on-success="handleAvatarSuccess2"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :multiple="true"
                    :file-list="fileList"
                    :limit="5"
                    list-type="picture"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div style="color:red">
                    选填，请上传优质商品相关图片，包括但不限于商品实拍图、买家返图、开箱图等相关图片
                    仅支持JPG. PNG格式图片,文件小于1M
                    <a>《商品图样例》</a>
                  </div>
                </el-form-item>
                <el-form-item label="营销视频：">
                  <el-upload
                    class="avatar-uploader el-upload--text  videobox"
                    action="http://gyapi.letuilm.com/upload"
                    :show-file-list="false"
                    :on-success="handleVideoSuccess"
                    :before-upload="beforeUploadVideo"
                    :on-progress="uploadVideoProcess"
                  >
                    <video
                      v-if="
                        videoForm.marketing_video != '' && videoFlag == false
                      "
                      :src="`http://` + videoForm.marketing_video"
                      class="avatar"
                      style=" width: 500px;height: 200px;"
                      controls="controls"
                    >
                      您的浏览器不支持视频播放
                    </video>
                    <i
                      v-else-if="
                        videoForm.marketing_video == '' && videoFlag == false
                      "
                      class="el-icon-plus avatar-uploader-icon"
                    ></i>
                    <el-progress
                      v-if="videoFlag == true"
                      type="circle"
                      :percentage="videoUploadPercent"
                      style="margin-top:30px;"
                    ></el-progress>
                  </el-upload>
                  <div style="color:red">
                    选填，仅支持MP4格式，小于20M,
                    30秒内。请保证你拥有这些视频的使用权!
                    <a>《必读!直推视频提交说明》</a>
                  </div>
                </el-form-item>
                <el-form-item label="精推素材：">
                  <el-input
                    type="text"
                    v-model="form.source_material_url"
                    autocomplete="off"
                    placeholder="请输入文档链接"
                  ></el-input>
                  <div style="color:red">
                    选填，请填写有效的石墨文档或有道云文档的链接(只读)
                    当前商品的精推文案可在普通商品列表修改商品信息时进行管理
                    <a>《精推文案填写规范及要求》</a>
                  </div>
                </el-form-item>
                <el-form-item label="精推文案：">
                  <el-input
                    type="textarea"
                    :rows="5"
                    v-model="form.copywriting"
                    autocomplete="off"
                    placeholder="如:护发精华+沐浴乳+洗发乳三件套，三瓶都是280ml哦!美女们，赶紧秒起来!超级划算~"
                  ></el-input>
                  <div style="color:red">
                    20-100字精简文案!突出产品亮点需求痛点为什么值得购买!注意不要用空格!查看
                    <a>《文案规范》</a>
                  </div>
                </el-form-item>
                <el-form-item label="朋友圈文案：">
                  <el-input
                    id="emojiInput"
                    type="textarea"
                    :rows="5"
                    v-model="form.friend_circle"
                    autocomplete="off"
                    placeholder="每行字数控制在18个汉字以内(包含适当表情)，总行数不超过6行，能在朋友國有较好的展示效果"
                  ></el-input>
                  <div>
                    <div id="exampleInputEmoji">
                      <el-button @click="toogleDialogEmoji"
                        >选择表情😃</el-button
                      >
                      <VEmojiPicker
                        v-show="showDialog"
                        labelSearch="Search"
                        lang="pt-BR"
                        @select="onSelectEmoji"
                      />
                    </div>
                    <!-- 选择表情 -->
                  </div>
                  <div style="color:red">
                    爆款必填内容，还有机会上架商品库首页，获取更多流量
                  </div>
                </el-form-item>
                <el-form-item label="特殊活动：">
                  <el-input
                    type="text"
                    v-model="form.special_activity"
                    autocomplete="off"
                    placeholder="4-10个字, 商品额外的优惠信息"
                  ></el-input>
                  <div style="color:red">
                    选填,填写后将增加商品展示权重,吸引更多流量,请规范填写
                    <a href="#">《特殊活动填写规范》</a>
                    填写示例:买-送一.第2件0元、前30分钟半价等。
                  </div>
                </el-form-item>
                <el-form-item label="开始时间：">
                  <el-radio v-model="form.whether_start" label="1"
                    >立即开始</el-radio
                  >
                  <el-radio v-model="form.whether_start" label="2"
                    >预告</el-radio
                  >
                </el-form-item>
                <el-form-item label="预告时间：" v-if="form.whether_start == 2">
                  <el-date-picker
                    v-model="form.start_time"
                    value-format="timestamp"
                    format="MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择预告开始日期时间"
                    :picker-options="startTimeOpt"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item required label="服务费：" prop="service_rate">
                  <el-input
                    type="text"
                    style="width:120px"
                    v-model="form.service_rate"
                    autocomplete="off"
                  >
                    <span slot="suffix">%</span></el-input
                  >
                </el-form-item>
                <el-form-item
                  required
                  label="佣金比例："
                  prop="commission_than"
                >
                  <el-input
                    type="text"
                    style="width:120px"
                    v-model="form.commission_than"
                    autocomplete="off"
                  >
                    <span slot="suffix">%</span></el-input
                  >
                  <!-- <div style="color:red"></div> -->
                </el-form-item>
                <el-form-item label="团长链接：">
                  <el-input
                    type="text"
                    v-model="form.group_link"
                    autocomplete="off"
                    placeholder="如htp:/scdick.taobao.om/e***Rw?pid=mm.0.0. 0"
                  >
                  </el-input>
                  <div style="color:red">
                    选填，填写后平台转链将优先使用团长链接，填写前请务必查看
                    <a> 《团长链接填写说明》 </a>
                  </div>
                </el-form-item>
                <el-form-item label="其他优惠：">
                  <el-input
                    type="text"
                    v-model="form.other_discount"
                    autocomplete="off"
                    placeholder="满减"
                  >
                    <!-- <span slot="suffix">元</span> -->
                  </el-input>
                  <!-- <a>修改</a> -->
                </el-form-item>
              </el-form>
            </div>
          </el-card>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')"
              >修 改</el-button
            >
          </div>
        </el-dialog>
        <!-- 新劵设置 -->
        <el-dialog
          title="新劵设置"
          :visible.sync="newcoupon"
          width="600px"
          @close="closecoupon"
          :close-on-click-modal="false"
        >
          <el-form :model="couponform">
            <el-form-item label="上线时间" width="30" style="text-align: left;">
              <!-- <el-input v-model="couponform.name" autocomplete="off"></el-input> -->
              <el-date-picker
                @change="timechange"
                v-model="couponform.start_time"
                type="datetime"
                placeholder="选择日期时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="timestamp"
              >
                <!-- default-time="12:00:00" -->
              </el-date-picker>
              <div style="color:blue">
                如需预告,开始时间请勿大于3天!如需马上开始,设置当前时间!
              </div>
            </el-form-item>
            <el-form-item label="活动类型" width="30" style="text-align: left;">
              <el-radio-group v-model="couponform.goods_activity">
                <el-radio :label="1">定向佣金</el-radio>
                <el-radio :label="2">聚划算</el-radio>
                <el-radio :label="3">淘抢购</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="新劵链接" width="30" style="text-align: left;">
              <el-input
                type="text"
                style="width: 450px;"
                v-model="couponform.coupon_url"
                autocomplete="off"
                placeholder="填输入正确隐藏券链接,http://开头"
                @blur="doCoupon"
              ></el-input>
            </el-form-item>
            <el-form-item label="新劵总数" width="30" style="text-align: left;">
              <el-input
                type="text"
                style="width: 250px;"
                v-model="couponform.coupon_num"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="新卷价格" width="30" style="text-align: left;">
              <el-input
                style="width: 250px;"
                type="text"
                v-model="couponform.newcouponprice"
                autocomplete="off"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="商品原价" width="30" style="text-align: left;">
              <el-input
                style="width: 250px;"
                type="text"
                v-model="couponform.goods_price"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="新劵后价" width="30" style="text-align: left;">
              <el-input
                style="width: 250px;"
                type="text"
                v-model="couponform.after_goods_price"
                autocomplete="off"
              ></el-input>
              <span
                >当前劵后价:
                <span style="color:red">{{ old_after_price }} </span>元
              </span>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closecoupon">取 消</el-button>
            <el-button type="primary" @click="dochangecoupon"
              >确 定 换 劵</el-button
            >
          </div>
        </el-dialog>
        <!-- 设置备注 -->
        <el-dialog
          title="我的单子备注(仅自己可见)"
          :visible.sync="remarkshow"
          width="600px"
        >
          <div>
            <div>
              <el-image
                style="width: 250px; height: 250px"
                :src="remarkimg"
                fit="cover"
              ></el-image>
            </div>
            <div>
              <el-input
                type="text"
                style="width: 450px;"
                v-model="remark"
                autocomplete="off"
                placeholder="填输入备注"
              ></el-input>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="remarkshow = false">取 消</el-button>
            <el-button type="primary" @click="doremark">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import VEmojiPicker, { emojisDefault, categoriesDefault } from "v-emoji-picker";
import {
  getUpGoods,
  getGoodsDetail,
  editGoodsInfo,
  soldOutGoods,
  editInfoGoods
} from "@/api/upgoods/upgoods";
import { checkCouponUrl, dochangecoupon } from "@/api/upgoods/upgoods";

import { getClassInfo } from "@/api/goods/goods";

export default {
  filters: {
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          var str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  },
  name: "upgoods",
  components: {
    VEmojiPicker
  },
  data() {
    return {
      old_after_price: "",
      start_time: "",
      end_time: "",
      timerarr: [],
      type: "",
      startTimeOpt: {
        disabledDate: time => {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      count: 0,
      currentPage: 1,
      remarkid: "",
      remark: "",
      remarkimg: "",
      remarkshow: false,
      newcoupon: false,
      couponform: {
        goods_id: "",
        start_time: "",
        goods_activity: 1,
        coupon_url: "",
        goods_price: "",
        after_goods_price: "",
        coupon_num: "",
        tb_goods_id: ""
      },
      oldid: "",
      flag: false,
      tb_goods_id: "",
      srcList: [
        // "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        // "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ],
      radio: "",
      class_id: "",
      goodsname: "",
      mainUrl: [],
      activity: [],
      options: [],
      goods_yx_img: "",
      relevant_img: "",
      videoForm: {
        marketing_video: ""
        // uploadUrl: "http://gyapi.letuilm.com/upload"
      },
      videoFlag: false,
      videoUploadPercent: 0,
      urlStr: "",
      fileList: [],
      dialogFormVisible: false,
      form: {
        goodsname: "", //商品名称
        goods_url: "", //商品地址
        goods_activity: "1", //商品活动
        marketing_activities: "0", //营销活动
        goods_class: "", //分类名称
        shop_name: "", //店铺名称
        shop_deposit: "", //店铺押金
        goods_name: "", //商品标题
        goods_img: "", //商品主图
        goods_yx_img: "", //商品营销图
        relevant_img: "", //相关商品图
        marketing_video: "", //营销视频
        source_material_url: "", //精推素材
        copywriting: "", //精推文案
        friend_circle: "", //朋友圈文案
        special_activity: "", //特殊活动
        start_time: "", //开始时间
        // coupon_type: "1", //优惠卷类型
        // coupon_url: "", //优惠卷链接
        // coupon_num: "", //优惠卷总量
        // after_coupon_price: "", //劵后单价
        group_link: "", //团长链接
        other_discount: "", //其他优惠
        checked: false, //勾选同意
        // goods_price: "", //商品原价
        commission_than: "", //佣金比例
        service_rate: "", //服务费
        // coupon_price: "", // 优惠卷金额
        // seller: {}, //淘宝接口返回的数据
        goods_short_title: "", //商品短标题
        tb_goods_id: "", //淘宝商品id
        whether_start: "1"
      },
      formLabelWidth: "120px",
      loading: false,
      activeName: "1",
      searchipt: "",
      searchradio: "1",
      tableData: [
        // {
        //   id: 15, // 商品id
        //   goods_url: require("@/assets/images/goodsimg.jpg"),
        //   goods_name: "女帽", //商品短标题
        //   commission_than: "10", //佣金比例
        //   start_time: "2020-05-02 15:26:20", //开始时间
        //   goods_end_time: "2020-05-09 15:26:20", //结束时间
        //   shop_deposit: "100.00", //店铺押金
        //   goods_activity: 1,
        //   goods_class_name: "女装", // 分类名称
        //   coupon_type: 1,
        //   coupon_price: "20", //优惠卷金额
        //   goods_status: "1", // 商品状态1=正常 2=佣金变动 3=到期结束 3= 系统下架 4=主动下架
        //   coupon_collar_count: 100, //优惠卷领取数量
        //   coupon_num: 10000, //优惠卷数量
        //   after_coupon_price: "40.00", // 卷后单价
        //   goods_img:
        //     "img.letuilm.com\\/2020\\/04\\/f3ccdd2020042809372664183.jpg", //商品图片
        //   goods_price: "30.00", //商品单价
        //   copywriting: "推广文案" // 推广文案
        // }
      ],
      // 表情
      showDialog: false
    };
  },

  computed: {},
  created() {
    if (this.$route.query.id) {
      this.searchipt = this.$route.query.id;
      this.getUpGoods(1, 15, this.type, this.$route.query.id);
    } else {
      this.getUpGoods(1, 15);
    }
  },
  mounted() {
    console.log(categoriesDefault);
    console.log("Total emojis:", emojisDefault.length);
  },
  methods: {
    // 新劵关闭事件
    closecoupon() {
      this.newcoupon = false;
      // this.couponform = {};
      console.log(this.$options.data().couponform);
      this.couponform = this.$options.data().couponform;
    },
    // 确认换劵事件
    dochangecoupon() {
      console.log("couponform", this.couponform);
      let timerr = parseInt(Date.parse(new Date()) + 3 * 60 * 60 * 24 * 1000);
      console.log(timerr);
      if (this.couponform.start_time > timerr) {
        this.$message.info("预告时间请选择在三天之内!");
      } else if (this.couponform.after_goods_price > this.old_after_price) {
        this.$message.info("新劵后价不能大于当前券后价!");
      } else {
        this.couponform.start_time = this.couponform.start_time
          .toString()
          .substring(0, 10);
        console.log(this.couponform.start_time);
        dochangecoupon({
          ...this.couponform
        })
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.$message.success("更改成功!");
            } else {
              this.$message.info(res.msg);
            }
            this.couponform = {};
          })
          .catch(err => {
            this.$message.error("更改失败!");
            console.log(err);
          });
      }
    },
    timechange(time) {
      console.log(time);
    },
    godetails(row) {
      let routes = this.$router.resolve({
        path: "/optimGoods/goodsDetails",
        query: { id: row.id }
      });
      window.open(routes.href, "_blank");
    },
    timerChange(time) {
      console.log(time);
      if (time !== null) {
        this.start_time = time[0].toString().substring(0, 10);
        this.end_time = time[1].toString().substring(0, 10);
        this.getUpGoods(
          1,
          15,
          this.type,
          this.searchipt,
          this.start_time,
          this.end_time
        );
      } else {
        this.start_time = "";
        this.end_time = "";
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getUpGoods(
        this.currentPage,
        15,
        this.type,
        this.searchipt,
        this.start_time,
        this.end_time
      );
    },
    // 表情
    toogleDialogEmoji() {
      this.showDialog = !this.showDialog;
    },
    onSelectEmoji(emoji) {
      // console.log(emoji.data);
      // this.form.friend_circle += emoji.data;
      // console.log(this.form.friend_circle);
      var elInput = document.getElementById("emojiInput");
      // console.log(elInput);
      //根据id选择器选中对象
      var startPos = elInput.selectionStart; // input 第0个字符到选中的字符
      var endPos = elInput.selectionEnd; // 选中的字符到最后的字符
      // console.log(startPos, " --- ", endPos);
      if (startPos === undefined || endPos === undefined) return;
      var txt = elInput.value;
      // 将表情添加到选中的光标位置
      var result =
        txt.substring(0, startPos) + emoji.data + txt.substring(endPos);
      elInput.value = result; // 赋值给input的value
      // 重新定义光标位置
      elInput.focus();
      elInput.selectionStart = startPos + emoji.data.length;
      elInput.selectionEnd = startPos + emoji.data.length;
      this.ruleForm.friend_circle = result; // 赋值
    },
    dosearch() {
      this.getUpGoods(
        1,
        15,
        this.type,
        this.searchipt,
        this.start_time,
        this.end_time
      );
    },
    getUpGoods(page, pagesize, type, goods_id, start_time, end_time) {
      this.loading = true;
      getUpGoods({
        page: page,
        pagesize: pagesize,
        type: type, // 1=进行中的商品 2=结束的商品
        goods_id: goods_id !== "" ? goods_id : undefined,
        start_time: start_time,
        end_time: end_time
      })
        .then(res => {
          console.log("上单商品列表", res);
          this.count = res.data.count;
          this.tableData = res.data.data;
          for (var k = 0; k < this.tableData.length; k++) {
            this.tableData[k].start_time = parseInt(
              +res.data.data[k].start_time + "000"
            );
            this.tableData[k].goods_end_time = parseInt(
              +res.data.data[k].goods_end_time + "000"
            );
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          console.log(err);
        });
    },
    // 获取商品详情
    getGoodsDetail(goods_id) {
      getGoodsDetail({
        goods_id: goods_id
      })
        .then(res => {
          console.log("上单商品详情", res.data);
          this.form = res.data;
          this.goods_yx_img = res.data.goods_yx_img;
          this.videoForm.marketing_video = res.data.marketing_video;
          let relearr = res.data.relevant_img.split(",");
          this.fileList = relearr.map(function(obj, index) {
            var rObj = {};
            rObj.name = "image" + index;
            rObj.url = "http://" + obj.url;
            return rObj;
          });
          console.log("相关图", res.data.relevant_img.split(","));
          this.form.goods_activity = res.data.goods_activity.toString();
          this.form.marketing_activities = res.data.marketing_activities.toString();
          this.form.whether_start = res.data.whether_start.toString();
          this.form.start_time = parseInt(
            res.data.start_time.toString() + "000"
          );
          console.log("上单商品form", this.form);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 修改
    editRow(scope) {
      this.dialogFormVisible = true;
      console.log("scope", scope.row);
      this.getGoodsDetail(scope.row.id);
      this.getClassInfo();
      // rows.splice(index, 1);
    },
    // 换劵弹窗
    changeRow(index, scope, rows) {
      console.log("index", index);
      console.log("scope", scope.row);
      console.log("rows", rows);
      this.couponform.tb_goods_id = scope.row.tb_goods_id;
      this.old_after_price = scope.row.after_coupon_price;
      this.couponform.goods_price = scope.row.goods_price;
      this.couponform.goods_id = scope.row.id;
      this.newcoupon = true;
    },
    // 下架
    deleteRow(index, scope, rows) {
      console.log("index", index);
      console.log("scope", scope.row);
      console.log("rows", rows);
      // rows.splice(index, 1);
      soldOutGoods({
        goods_id: scope.row.id
      })
        .then(res => {
          console.log(res);
          this.$message.success("下架成功!");
        })
        .catch(err => {
          this.$message.error("下架失败!");
          console.log(err);
        });
    },
    // 备注
    addinfoRow(index, scope, rows) {
      console.log("index", index);
      console.log("scope", scope.row);
      console.log("rows", rows);
      this.remarkimg = scope.row.goods_img;
      this.remarkid = scope.row.id;
      this.remarkshow = true;
      // rows.splice(index, 1);
    },
    doremark() {
      editInfoGoods({
        goods_id: this.remarkid,
        remarks: this.remark
      })
        .then(res => {
          console.log(res);
          this.$message.success("修改备注成功!");
          this.remarkshow = false;
          this.remarkid = "";
          this.remark = "";
        })
        .catch(err => {
          console.log(err);
          this.$message.error("修改备注失败!");
        });
    },
    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange2(val) {
      this.currentRow = val;
    },
    // type选择
    typeChange(val) {
      this.getUpGoods(
        1,
        15,
        this.type,
        this.searchipt,
        this.start_time,
        this.end_time
      );
      console.log(val);
    },
    // 导航栏切换
    handleClick() {
      this.getUserGoods(1, 15, this.activeName, "");
      console.log("导航", this.activeName);
    },
    // 优惠卷检测
    doCoupon() {
      console.log(this.form.coupon_url, this.tb_goods_id);
      // this.couponform.coupon_url =
      //   "https://uland.taobao.com/quan/detail?sellerId=2800657180&activityId=fdfe4274c5664de6b7936f803952f02a"; //新
      // this.couponform.coupon_url =
      //   "https://uland.taobao.com/quan/detail?sellerId=2200577469555&activityId=6bfc87227f2d41abac94c40211198e67"; //新
      checkCouponUrl({
        coupon_url: this.couponform.coupon_url,
        item_id: this.couponform.tb_goods_id
        // item_id: "597303616523"
      })
        .then(res => {
          console.log("优惠卷信息", res);
          if (res.code == 200) {
            this.$message.success("优惠卷检测成功!");
            this.couponform.coupon_num = res.data.couponnum;
            this.couponform.after_goods_price =
              this.couponform.goods_price - res.data.money;
          } else {
            this.$message.info(res.msg);
          }
          // console.log(" this.couponform", this.couponform);
        })
        .catch(err => {
          this.$message.error("检测失败!");
          console.log(err);
        });
    },
    changebar(e) {
      console.log(e);
      this.srcList = [];
      this.srcList.push("http:" + e);
      this.form.goods_img = this.srcList[0];
      console.log(this.srcList);
    },
    // 获取分类
    getClassInfo() {
      this.options = [];
      getClassInfo()
        .then(res => {
          console.log("商品分类", res);
          this.options.push(...res.data);
          var filterArr = this.options.filter(
            e => e.id === this.form.goods_class
          );
          console.log("filterArr", filterArr);
          // this.form.goods_class_name = filterArr[0].name;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 表情
    doadd(e) {
      console.log("ClickedEnter", e);
      this.form.friend_circle = this.form.friend_circle + e;
      console.log(this.form.friend_circle);
    },
    //   上传视频
    handleVideoSuccess(res, file) {
      //获取上传图片地址
      console.log(file);
      // console.log("视频返回", res);
      this.videoFlag = false;
      // this.videoUploadPercent = 0;
      // if (res.status == 200) {
      // console.log(res.substring(0, 120));
      // const url = JSON.parse(res.substring(0, 119)).data.url;
      const url = res.data.url;
      console.log("返回", url);
      this.form.marketing_video = url;
      this.videoForm.marketing_video = url;
      // this.videoForm.videoUploadId = res.data.uploadId;
      // } else {
      //   this.$message.error("视频上传失败，请重新上传！");
      // }
    },
    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 20;
      if (["video/mp4"].indexOf(file.type) == -1) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传视频大小不能超过20MB哦!");
        return false;
      }
    },
    uploadVideoProcess(event, file, fileList) {
      console.log(fileList);
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage;
    },
    //   上传主图
    handleAvatarSuccess1(res, file) {
      console.log("返回", res, file.raw);
      // console.log("返回", res.substring(0, 120));
      const url = res.data.url;
      console.log("返回", url);
      this.form.goods_yx_img = url;
      this.goods_yx_img = url;
      // http://img.letuilm.com/2020/05/faa3962020051213542219757.jpeg
      // this.goods_yx_img = URL.createObjectURL(file.raw);
      console.log("商品主图", this.form.goods_yx_img);
      // console.log(file.raw);
    },
    // 上传相关图
    handleAvatarSuccess2(res, file, fileList) {
      console.log("返回", res, file.raw);
      console.log("返回fileList", fileList);
      this.urlStr = "";
      if (fileList.length > 0) {
        for (var i = 0; i < fileList.length; i++) {
          // this. form.relevant_img;
          this.urlStr += fileList[i].response.data.url + ",";
        }
      }
      this.urlStr = this.urlStr.substring(0, this.urlStr.length - 1);
      console.log("urlStr", this.urlStr);
      // console.log("返回", res.substring(0, 120));
      // const url = JSON.parse(res.substring(0, 120)).data.url;
      // console.log("返回", url);
      // this. form.relevant_img = url;
      // this.relevant_img = url;
      // this.relevant_img = URL.createObjectURL(file.raw);
      // console.log("商品相关图", this. form.relevant_img);
      // console.log(file.raw);
    },
    beforeAvatarUpload(file) {
      console.log(file.type);
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG,PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },
    handleRemove(file, fileList) {
      console.log("相关图file", file);
      console.log("相关图fileList", fileList);
      this.urlStr = "";
      if (fileList.length > 0) {
        for (var i = 0; i < fileList.length; i++) {
          // this. form.relevant_img;
          this.urlStr += fileList[i].response.data.url + ",";
        }
      }
      this.urlStr = this.urlStr.substring(0, this.urlStr.length - 1);
      console.log("urlStr", this.urlStr);
    },
    handlePreview(file) {
      console.log("xiangguantu", file);
    },
    //   分类切换
    classChange(val) {
      this.form.goods_class = val;
      var filterArr = this.options.filter(e => e.id === val);
      console.log("filterArr", filterArr);
      this.form.goods_class_name = filterArr[0].name;
      console.log("this. form.goods_class", val);
    },
    submitForm(formName) {
      this.form.relevant_img = this.urlStr;
      this.form.goods_id = this.form.id;
      console.log("相关图列表", this.form.relevant_img);
      console.log("表单内容", this.form);
      this.$refs[formName].validate(valid => {
        console.log("valid", valid);
        if (this.form.whether_start == 1) {
          console.log(this.form.start_time);
          const newdata = Date.parse(new Date())
            .toString()
            .substr(0, 10);
          this.form.start_time = parseInt(newdata);
        } else {
          this.form.start_time = parseInt(
            this.form.start_time.toString().substr(0, 10)
          );
        }
        editGoodsInfo(this.form)
          .then(res => {
            console.log(res);
            this.$message.success("修改成功!");
            this.dialogFormVisible = false;
            this.form = {};
            this.videoForm = {};
            this.goods_yx_img = "";
            this.relevant_img = "";
          })
          .catch(err => {
            this.$message.error("修改失败!");
            console.log(err);
          });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
#exampleInputEmoji::v-deep {
  position: relative;
  #EmojiPicker {
    position: absolute;
    z-index: 10;
  }
  #Categories {
    line-height: 5px;
  }
  #InputSearch {
    display: none !important;
  }
}
.upgoods {
  // width: 970px;
  box-sizing: border-box;
  .upgoods_main {
    // width: 970px;
    .taber::v-deep {
      height: 750px;
      white-space: pre-wrap;
      word-wrap: break-word;
      display: block;
      overflow-x: hidden;
      overflow-y: scroll;
      .avatar {
        width: 120px;
        height: 120px;
      }
      .el-upload {
        width: 120px;
        height: 120px;
        line-height: 120px;
        border: 1px dashed #000;
      }
      .el-radio-button--mini .el-radio-button__inner {
        border: none !important;
        border-radius: 12px;
      }
      .radiobtn {
        padding: 10px 0;
      }
      .chooseurl {
        .taber_box {
          display: flex;
          .el-radio-group {
            .elradio {
              width: 120px;
              height: 120px;
              margin: 10px;
              margin-top: 0;
              margin-left: 20px;
            }
          }
          .el-radio-button__inner {
            padding: 0;
          }
        }
      }
      .videobox {
        width: 500px !important;
        .el-upload--text {
          font-size: 20px;
          width: 100%;
          height: 150px;
          line-height: 150px;
        }
      }
    }
    .search_box::v-deep {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el-input__inner {
        height: 28px;
      }
      .el-date-editor {
        width: 250px;
      }
      .el-icon-search {
        line-height: 28px;
      }
    }
    .taber_table {
      margin-top: 10px;
    }
  }
}
</style>
